<template>
 <div class="write">
   <form action="">
     <input type="text" placeholder="手机号码" v-model="uPhone" @blur="validateMobilePhone">
   <input type="password" placeholder="密码" v-model="password" @blur="validatePass" @input="allow">
   <input type="text" placeholder="邀请码(选填)" value="">
   <div></div>
   </form> 
   <p>首次用手机号登入将自动为您注册，享新客专属优惠</p>
   <van-button type="primary" block  class="btns" :class="{'active':isActive}">进入ABS</van-button>
 </div>
</template>

<script>
import {getphonecode} from '../../utils/api'
import { Dialog } from 'vant';
let btns=document.querySelector('.btns')
export default {
  data(){
    return{
      uPhone:'',
      password:'',
      isActive: false
    }
  },
  components: {
    [Dialog.Component.name]: Dialog.Component,//局部注册弹出框
  },

  methods:{
    async getphonecode(){
    const result=await getphonecode({
        uPhone:this.uPhone,
        password:this.password
       })
    },
      validateMobilePhone (rule, uPhone) { //正则验证
        if (this.uPhone === '') {
          this.openshow()
        } else {
          if (this.uPhone !== '') { 
            let reg=/^1[3456789]\d{9}$/;
            if(!reg.test(this.uPhone)){
              this.usershow()
            }else{
            return this.uPhone
            }
          }
        }
      },
      openshow(){ //弹出框
        Dialog.alert({
          message: '手机号码长度不能为空',
            }).then(() => {});
      },
      usershow(){
        Dialog.alert({
          message: '手机号码有误',
            }).then(() => {});
      },
    
      validatePass(rule, password){
        if (this.password === '') {
          this.passshow()
        }else{
          if(this.password !== ''){
            let strreg=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/
            if(!strreg.test(this.password)){
              this.repassshow()
            }else{
              return this.password
            }
          }
        }
      },
      passshow(){ //弹出框
        Dialog.alert({
          message: '密码不能为空',
            }).then(() => {});
      },
      repassshow(){
        Dialog.alert({
          message: '密码长度大于6位小于21位且是由字母及数字组合',
            }).then(() => {});
      },

      allow(){ //底部按钮换色
        if(this.password.length>6){
          this.isActive = true
        }else{
          this.isActive=false
        }
      }
   }
}
</script>


<style lang="stylus" scoped>

.write{
input {
   margin-left 20px
   background #343434
   color #fff
   width 335px
   height 46px
   border none 
   border-bottom 1px solid #6B6B6B
   margin-bottom 1px
   border-radius 0
 }
 input::-webkit-input-placeholder{
   color #FFFFFF
   font-size 12px
 }
 
  p{
    color #9A9A9A
    font-size 12px
    margin-top 9px
    margin-left 20px
  }
  .btns{
    width 336px
    height 48px
    background  #888888
    font-size 16px   
    color #fff
    border none 
    border-radius 5px
    margin-left 20px
    margin-top 29px
  }
  .active{
    background #BB2741
  }
}
 
</style>